<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>item</title>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="./css/Details page.css">
    <link rel="stylesheet" href="./css/item.css">
    <link rel="stylesheet" href="./css/nav mbx.css">
</head>

<body>
    <div>

        <div class="nav" style="z-index: 99;">
            <ul>
                <li><a href="index.html"><img src="https://www.innisfree.cn/webstatic/images/logo_2ebdcae.png" alt="" style="height: 31px; width: 164px;"></a></li>
                <li>
                    <div class="ins-headerUserInfo ins-flex is-align-middle ">
                    <span style="margin-right:10px;">Hey,</span>
                    <span style="margin-right:10px;">登录</span>
                    <span style="color: #898587;">注册</span>
                    </div>
                </li>
                <li>
                    <div class="ins-headerSearch ins-appHeader__search">
                        <input type="text" name="" class="ipt" placeholder="第四代小绿瓶">
                        <div class="ins-searchBar ins-headerSearch__dialog"></div>
                    </div>
                </li>
                <li><a href="javascript:;"><p>购物</p></a></li>
                <li><a href="javascript:;"><p>热门活动</p></a></li>
                <li><a href="javascript:;"><p>发现</p></a></li>
                <li><a href="javascript:;"><p>关于我们</p></a></li>
            </ul>
        </div>

        <div class="ins-appPageView__content" style="padding-top: 75px;">
            <div class="wrapper">
              <div class="ins-prdsBreadNav">
                <span onclick="javascript:history.go(-1);" style="cursor:pointer">←</span><span class="ins-prdsBreadNav__title">HOME</span>
              
              <div class="ins-prdsBreadNavItem is-first">
                <div class="title">
                  护肤系列
                  <i class="ins-icon icon-down"></i>
        
                </div>
                <div class="content" style="display: none;">
                  <div class="content-scroller">
                    <div class="content-item">
                      <span>产品类别</span>
                    </div>
        
                    <div class="content-item is-active">
                      <span>护肤系列</span>
                    </div>
        
                    <div class="content-item">
                      <span>畅销产品</span>
                    </div>
        
                    <div class="content-item">
                      <span>特惠专区</span>
                    </div>
        
                  </div>
                </div>
        
              </div>
        
              <div class="ins-prdsBreadNavItem">
                <div class="title">
                  济州石榴
                  <i class="ins-icon icon-down"></i>
                </div>
        
                <div class="content" style="display: none;">
                  <div class="content-scroller">
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item is-active">
                      <span>济州石榴</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                    <div class="content-item">
                      <span>红茶青春</span>
                    </div>
        
                  </div>
                </div>
        
              </div>
              <span onclick="javascript:history.go(1);" style="cursor:pointer; float: right;">→</span>
            </div>
            
            <div id="box">
                <ul>
                <!-- <li>
                <h1></h1>
                <p></p>
                <img src="" alt="">
                <p></p>
                <input type="number" name="" id="">
                <button onclick="addCart()">加入购物车</button> 
            </li>-->
            </ul>
            </div>
            <a href="javascript:;" id="my-cart" onclick="toMyCart()">立即购买</a>
            </div>
          </div> 

    


    <div class="ins-appFooter min-wrapper ins-flex" >
        <div class="ins-appFooter__content">
        <div class="ins-appFooter__left ins-flex__1" style="margin: 150px;">
            <img class="ins-appFooter__logo" src="https://www.innisfree.cn/webstatic/images/logo_white_56c6462.png" alt="logo">
        
            <div class="ins-appFooter__thrid">
                <div class="ins-appFooter__thrid--weibo">
                    <img src="	https://www.innisfree.cn/webstatic/images/weibo_74219f1.png" alt="">
                </div>
                <div class="ins-appFooter__thrid--wechat">
                    <img src="https://www.innisfree.cn/webstatic/images/wechat_900a937.png" alt="">
                
                    <div class="wxShow">
                        <img src="https://www.innisfree.cn/webstatic/images/wx_6ff58d7.png" alt="">
                    </div>
                </div>
                <div class="ins-appFooter__thrid--shop">
                    <img src="	https://www.innisfree.cn/webstatic/images/shop_fc0fee4.png" alt="">
                
                    <div class="ins-appFooter__thrid--shopTip">
                        <div>专卖店导航</div>
                        <div>探店指南</div>
                    </div>
                </div>
            </div>
    
            <div class="ins-appFooter__copyRight">
                <img src="	https://www.innisfree.cn/webstatic/images/copyright_d57b29a.png" alt="">
           
                <div class="ins-appFooter__copyRight--Tip"> copyright@2011 amorerepacific corporation. All rights reserved </div>
    
            </div>
    
        </div>
    
        <div class="ins-appFooter__middle ins-flex__1" style="margin: 200px;">
            <div class="ins-appFooter__middle--qr">
                <img src="	https://www.innisfree.cn/webstatic/images/wechatqr_2ca96da.png" alt="">
                <span>Innisfree公众号</span>
            </div>
            <div class="ins-appFooter__middle--qr">
                <img src="https://www.innisfree.cn/webstatic/images/wechatmp_8888415.png" alt="">
                <span>Innisfree商城小程序</span>
            </div>
        </div>
    
         <!-- <div class="ins-appFooter__right">
            <div class="ins-appFooter__map clearfix">
                <ul class="ins-appFooter__map1">
                    <li class="tt">联系我们</li>
                    <li>服务热线：400-920-9238</li>
                    <li>服务时间：09:00-21:00 （不含国定假日）</li>
                    <li>客服邮箱：innisfree@innisfree.cn</li>
                </ul>
                <ul class="ins-appFooter__map2">
                    <li class="tt">会员中心</li>
                    <li> 加入会员 </li>
                    <li><a href="/faq/vipService"> 会员制度 </a></li>
                    <li><a href="/userInfo">我的主页</a></li>
                </ul>
                <ul class="ins-appFooter__map3">
                    <li class="tt">客服中心</li>
                    <li><a href="/faq/index">公告板</a></li>
                    <li><a href="/faq/instructions">使用说明</a></li>
                    <li><a href="/faq">FAQ</a></li>
                </ul>
            </div>
        </div> -->
        
    </div>
    </div>
</div>
    <script>
        console.log(location.search);

        // 把搜索字符串?id=xxx&a=xx 转为对象
        let searchObj=new URLSearchParams(location.search);
        console.log(searchObj);
        // 获取id的值
        let pid=searchObj.get("id");
        console.log(pid);
        let dateilProductAPI="http://jx.xuzhixiang.top/ap/api/detail.php";
        axios.get(dateilProductAPI,{params:{id:pid}}).then((r)=>{
            let pObj=r.data.data;
            console.log(pObj);
            if(pObj){
                let str=`
                
                <li class="boxRight">
                    <h1>${pObj.pname}</h1>
                    <p>${pObj.pdesc}</p>
                    <h1>${pObj.pprice}</h1>
                    <hr>
                    <input type="number" name="" id="ipt" value="1" min=1><br>
                    <button onclick="addCart()">加入购物车</button>
                </li>
                <li>  
                 <img src="${pObj.pimg}">   
                
                </li>
                `;
                let box=document.querySelector("#box");
                box.innerHTML=str;
            }else{
                alert("商品不存在");
            }
        })

        // 加入购物车
      /* 
      
      给用户购物车中添加商品 接口

      接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
      接口请求方式：get
      接口参数：
            uid  用户id
            pid  商品id
            pnum  要添加的商品数量
      */

      async function addCart(){

        // 获取参数
        let uid=localStorage.getItem("id");
        pid;
        let ipt=document.querySelector("#ipt");
        let pnum=ipt.value;
        let params={uid,pid,pnum};
        console.log(params);
        let addCartAPI="http://jx.xuzhixiang.top/ap/api/add-product.php";
        let res=await axios(addCartAPI,{params});
        console.log(res);
        alert("加入购物车成功");
      }
      function toMyCart(){
          let uid=localStorage.getItem("id");
          if(uid){
              location.href="cart.html";
          }else{
              location.href="index.html";
          }
      }

    </script>
    
</body>
</html>